// 变量
$primary-color: #6df7be;
$text-color: #ffffff;
$disabled-color: #cccccc;

.StabilityCoefficient {
  display: flex;

  .leftStabilityCoefficient,
  .rightStabilityCoefficient {
    width: 280px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-left: 60px;
    padding-top: 20px;

    .topLeftStabilityCoefficient,
    .topRightStabilityCoefficient {
      display: flex;
      align-items: center;

      .topLeftStabilityCoefficientTitle,
      .topRightStabilityCoefficientTitle {
        color: $primary-color;

        div {
          &:first-child {
            font-size: 24px;
          }

          &:last-child {
            font-size: 14px;
          }
        }
      }

      .topLeftStabilityCoefficientNumber,
      .topRightStabilityCoefficientNumber {
        margin-left: 20px;
        color: $text-color;
        font-size: 60px;
        overflow: hidden;
      }
    }

    .maxNumber {
      color: $disabled-color;
      font-size: 20px;
    }
  }

  .rightStabilityCoefficient {
    padding-left: 60px;
  }

  .allStabilityCoefficient {
    margin-left: 30px;
    width: 390px;
    border-radius: 5px;
    border: 1px solid $primary-color;
    box-sizing: border-box;
    border-bottom: 0px;

    .allStabilityCoefficientCenter {
      padding-top: 20px;
      padding-left: 5px;
      display: flex;
      align-items: center;
      color: $text-color;

      .content {
        margin-left: 20px;

        div {
          &:first-child {
            font-size: 20px;
            color: $primary-color;
          }

          &:last-child {
            margin-top: 10px;
            font-size: 14px;
            color: $disabled-color;
          }
        }
      }

      .StabilityCoefficientMax {
        color: $text-color;
        font-size: 50px;
        margin-left: 10px;
      }
    }
  }
} 